<!--
  厦门大学计算机专业 | 华为开发专家(HDE)
  专注《零基础学编程系列》  http://lblbc.cn/blog
  包含：鸿蒙 | Java | 安卓 | 前端 | Flutter | iOS | 小程序
  公众号：蓝不蓝编程
  -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const num1 = ref('0');
const num2 = ref('0');
const num3 = ref('0');
const num4 = ref('0');
const num5 = ref('0');
const num6 = ref('0');
const num7 = ref('0');

const createNums = () => {
  num1.value = random(33);
  num2.value = random(33);
  num3.value = random(33);
  num4.value = random(33);
  num5.value = random(33);
  num6.value = random(33);
  num7.value = random(16);
};

const random = (maxNum: number) => {
  return (Math.floor(Math.random() * maxNum) + 1).toString();
};

onMounted(createNums);
</script>
<template>
  <div class="column">
   <div class="row">
     <div class="num">{{ num1 }}</div>
     <div class="num">{{ num2 }}</div>
     <div class="num">{{ num3 }}</div>
     <div class="num">{{ num4 }}</div>
     <div class="num">{{ num5 }}</div>
     <div class="num">{{ num6 }}</div>
     <div class="num">{{ num7 }}</div>
   </div>
   <div class="button" @click="createNums">生成</div>
  </div>
 </template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.num {
  color: black;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
}

.button {
  color: white;
  background-color: #489cf5;
  width: 100px;
  height: 50px;
  border-radius: 25px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  cursor: pointer;
}
</style>